// todo ======================= 图表概览 =======================
axios.get('/student/overview').then(({ data: { code, message, data } }) => {
  // console.log(res)
  if (code !== 0) return alert(message)
  const { total, avgSalary, avgAge, proportion } = data
  qs('.total').innerHTML = total
  qs('.avgSalary').innerHTML = avgSalary
  qs('.avgAge').innerHTML = avgAge
  qs('.proportion').innerHTML = proportion
})
// todo ======================= 饼图 =======================
// getPie()
function getPie(data) {
  const myChart = echarts.init(qs('.pie'))
  const option = {
    title: {
      text: '籍贯 Hometown'
    },
    tooltip: {
      trigger: 'item',
      valueFormatter: (value) => value + '人'
    },
    toolbox: {},
    series: [
      {
        name: '籍贯',
        type: 'pie',
        radius: ['5%', '50%'],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data
      }
    ]
  }
  myChart.setOption(option)
}
// todo ======================= 地图 =======================
// getMap()
function getMap(chinaGeoCoordMap, chinaDatas) {
  var chinaGeoCoordMap
  var chinaDatas

  var convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i]
      var fromCoord = chinaGeoCoordMap[dataItem[0].name]
      var toCoord = [121.4648, 31.2891]
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: fromCoord,
            value: dataItem[0].value
          },
          {
            coord: toCoord
          }
        ])
      }
    }
    return res
  }
  var series = []
  ;[['上海市', chinaDatas]].forEach(function (item) {
    // console.log(item)
    series.push(
      {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5 //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name
            },
            fontSize: 13
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 5 + val[2] * 5 //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          }
        })
      },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: '#0f0'
            }
          },
          emphasis: {
            show: true,
            color: '#f60'
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [
          {
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10])
          }
        ]
      }
    )
  })
  let myChart = echarts.init(qs('.map'))
  let option = {
    title: {
      text: '来沪路线'
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = ''
        var name = params.name
        var value = params.value[params.seriesIndex + 1]
        res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
        return res
      }
    },
    backgroundColor: '#fff',
    visualMap: {
      //图例值控制
      min: 0,
      max: 1,
      calculable: true,
      show: true,
      color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: 'rgba(51, 69, 89, .5)', //地图背景色
          borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  }
  myChart.setOption(option)
}
// todo ======================= 柱状图 =======================
// 鼠标经过 显示
qs('#batch').addEventListener('mouseenter', function () {
  // qs('#batch').classList.toggle('show')
  this.style.opacity = 1
})
//鼠标离开 隐藏
qs('#batch').addEventListener('mouseleave', function () {
  // qs('#batch').classList.toggle('show')
  this.style.opacity = 0
})

qsAll('#batch li').forEach((item, index) => {
  item.addEventListener('click', function () {
    getBatch(index + 1)
  })
})
getBatch()
function getBatch(batch = 1) {
  axios.get('/score/batch', { params: { batch } }).then(({ data: { code, data, message } }) => {
    // console.log(res)
    if (code !== 0) return alert(message)
    barChart(data)
  })
}

function barChart({ group, avgScore, lt60, gt60, gt80 }) {
  //  初始化 ceharts echarts
  const myChart = echarts.init(qs('.barChart'))
  // 指定图表的配置项和数据
  let option = {
    // 网格（整个图表区域设置）
    grid: {
      top: 50,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
      valueFormatter: (value) => value + ' 人',

      axisPointer: {
        // 坐标轴指示器配置项
        // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 图例
    legend: {},
    // X轴
    xAxis: [
      {
        type: 'category',
        data: group,
        axisPointer: {
          // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
          type: 'shadow'
        }
      }
    ],
    // Y轴
    yAxis: [
      {
        type: 'value',
        name: '成绩',
        min: 0, // y轴数据最小值
        max: 100, // y轴数据最大值
        interval: 10, // step步长，把y轴的数据分成多少份
        axisLabel: {
          // Y轴文字设置
          formatter: '{value}分' // Y轴文字
        }
      },
      {
        type: 'value',
        name: '人数',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    // 数据部分（4组数据）
    series: [
      {
        name: '平均分',
        type: 'bar',
        data: avgScore,
        barWidth: '15',
        tooltip: {
          valueFormatter: (value) => value + ' 分' //会覆盖tooltip 里面的  valueFormatter
        }
      },
      {
        name: '低于60分人数',
        type: 'bar',
        data: lt60,
        barWidth: '15',
        yAxisIndex: 1 // Y轴索引，1表示使用第2个Y轴
        // tooltip: {
        // valueFormatter: value => value + ' 人'
        // }
      },
      {
        name: '60到80分之间',
        type: 'bar',
        data: gt60,
        barWidth: '15',
        yAxisIndex: 1 // Y轴索引，1表示使用第2个Y轴
        // tooltip: {
        // valueFormatter: value => value + ' 人'
        // }
      },
      {
        name: '高于80分人数',
        type: 'bar',
        data: gt80,
        barWidth: '15',
        yAxisIndex: 1 // Y轴索引，1表示使用第2个Y轴
        // tooltip: {
        // valueFormatter: value => value + ' 人'
        // }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
// todo  ======================= 折线图 =======================
axios.get('/student/list').then(({ data: { code, data, message } }) => {
  // console.log(res)
  if (code !== 0) return alert(message)
  // 折线 图 数据
  const lineData = { name: [], salary: [], truesalary: [] }

  const pieData = []

  // 地图，第一组数据
  const chinaGeoCoordMap = { 上海市: [121.4648, 31.2891] }
  // 地图，第二组数据
  const chinaDatas = []

  data.forEach((item) => {
    lineData.name.push(item.name)
    lineData.salary.push(item.salary)
    lineData.truesalary.push(item.truesalary)

    let index
    // 判断 饼状图 数据 有没有 此 省份
    if ((index = pieData.findIndex((ite) => ite.name === item.province)) >= 0) {
      pieData[index].value++
    } else pieData.push({ name: item.province, value: 1 })

    chinaGeoCoordMap[item.county] = [item.jing, item.wei]
    chinaDatas.push([{ name: item.county, value: 0 }])
  })
  // 渲染 饼状图--------------------------------------------------------
  getPie(pieData)

  // 渲染 来沪图--------------------------------------------------------
  getMap(chinaGeoCoordMap, chinaDatas)

  // 渲染 折现图--------------------------------------------------------
  lineChart(lineData)
})
// 折现图函数--------------------------------------------------------
function lineChart(obj) {
  const myChart = echarts.init(qs('.line'))
  const option = {
    title: {
      text: '薪资 Salary'
    },

    xAxis: {
      // type: 'category',
      boundaryGap: false,
      data: obj.name
    },
    grid: {
      top: 50,
      left: 50,
      right: 30
    },
    legend: {},
    tooltip: {
      trigger: 'axis',
      valueFormatter: (value) => '￥' + value.toFixed(2)
    },
    yAxis: {
      min: 0,
      max: 25000,
      interval: 5000
      // type: 'value'
    },
    dataZoom: [
      {
        // 下方 出现滚动条
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'none',
        start: 0,
        end: 20
      }
      // {
      //   // 内置的数据缩放  手指滑动
      //   type: 'inside',
      //   xAxisIndex: 0,
      //   filterMode: 'none'
      // }
    ],
    series: [
      {
        name: '期望薪资',
        data: obj.truesalary,
        type: 'line',
        smooth: true,
        // symbol: 'none' //把 小圆点去掉  鼠标经过也没有
        showSymbol: false //把 小圆点去掉 鼠标经过 出现
      },
      {
        name: '实际薪资',
        data: obj.salary,
        type: 'line',
        smooth: true,
        showSymbol: false
      }
    ],
    color: ['red', 'blue']
  }
  myChart.setOption(option)
}
